<script setup lang="ts">
  import {useRouter} from "vue-router";
  import {ref} from "vue";

  const router=useRouter();


  let routerInfo=ref();

  routerInfo.value=router.options.routes.filter(item=>item.children);




  const isCollapse = ref(false)
  const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
  }
  const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
  }

</script>

<template>
  <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      @open="handleOpen"
      :router="true"
      background-color="aliceblue"
      text-color="grey"
      active-text-color="deepskyblue"
      @close="handleClose"
  >
    <el-sub-menu  :index="index+''"  v-for="(item,index) in routerInfo" :key="item.name">
      <template #title >

        <span>{{item.meta.name}}</span>
      </template>
      <el-menu-item  :route="chitem.path" :index="index+''+mindex"  v-for="(chitem,mindex) in item.children" :key="chitem.name">
        <el-button v-show="chitem.meta.isShow"   style="color:#0278ae;"   :icon="chitem.meta.icon" link  size="small" type="info"  class="iconConfig"/>
        <span v-show="chitem.meta.isShow">{{chitem.meta.name}}</span>
      </el-menu-item>
    </el-sub-menu>

  </el-menu>
</template>

<style scoped lang="less">
.el-menu{
  height: 633px;



}

</style>